<template>
  <!-- 如果期望在同一个路由页面中 展示多个同级视图(router-view)  也是可行的
    
    如何实现? 
      1. 分别给router-view定义name属性指定视图名称 (如果不设置name => 默认name="default")
       <router-view name="header"></router-view>
       <router-view></router-view>
       <router-view name="footer"></router-view>

      2. 在路由配置中使用components => 传入一个对象参数  对应视图名称(name),将对应的视图组件 展示到视图当中
      {
        path:"/home"
        name:"home",
        components:{
          header:HeaderBar,
          default:HomeView,
          footer:FooterBar,
        }
      }
   
  
  
   -->

  <div id="app">
    <router-view name="header"></router-view>
    <div class="app-main">
      <!--  name="default" -->
      <router-view></router-view>
    </div>
    <router-view name="footer"></router-view>
  </div>


  <!-- <div id="app">
    <router-view name="header"></router-view>
    <router-view class="app-main"></router-view>
    <router-view name="footer"></router-view>
  </div> -->
</template>


<style lang="scss">
//  lang="scss"当前style内的样式 会用scss语法解析
/* style中如果不添加scoped  => 默认是全局样式 对所有的页面生效 */
/* style中如果添加scoped  => 默认是局部样式 对当前页面生效 (1. 给当前template内的元素添加唯一的自定义属性  2. 每个css属性后 都会添加唯一属性做限制) */
html,
body,
#app {
  width: 100%;
  height: 100%;
}

body {
  font-size: 0.24rem;
}

#app {
  display: flex;
  flex-direction: column;

  .app-header,
  .app-footer {
    height: 1rem;
    line-height: 1rem;
    background-color: grey;
    color: #fff;
  }

  .app-header {
    text-align: center;
  }

  .app-main {
    flex: 1;
    overflow-y: auto;
  }

  .app-footer {
    .nav {
      text-align: center;
      display: flex;

      li {
        flex: 1;
      }
    }
  }

}

.active {
  background-color: pink;
  color: #fff;
}
</style>
